<template>
	<view class="mainCss">
		<view class="titleBox">
			<view class="titleLeft">
				
			</view>
			<view class="titleText">
				<text>互动</text>
			</view>
			<view class="titleRight">
				
			</view>
		</view>
		<view class="bgBox">
			<view class="changeBox">
				<view class="type" :class="[type == index?'type1':'type']" v-for="(item, index) in typeList"
					:key="index" @click="tapInfo(index)">
					<text>{{item.typeName}}</text>
				</view>
			</view>
		</view>
		<view class="bodyBox">
			<view class="interactBox" v-for="(item, index) in 5" :key="index">
				<view class="userBox">
					<img src="../../static/home/touxiang.png" class="userHead" @click='goHomepage'>
					<view class="userName">
						<text style="width: 100%;">昵称</text>
						<text style="color: #999999;">简介...</text>
					</view>
				</view>
				<view class="interactInfoBox" @click="onClick">
					<text>文章内容</text>
				</view>
				<view class="interactImgBox">
					<view class="imgBox">
						<view class="" v-for="(item1, index1) in 6" :key="index1">
							<img src="../../static/home/info.jpg" class="interactImg" @click="onClick">
						</view>
					</view>
				</view>
				<view class="toolBox">
					<view class="tool" @click="onShare">
						<img src="../../static/interact/fenxiang.png" class="toolIcon">
						<text>99+</text>
					</view>
					<view class="tool">
						<img src="../../static/interact/pinglun.png" class="toolIcon">
						<text>99+</text>
					</view>
					<view class="tool" @click="good=!good">
						<img src="../../static/interact/dianzan.png" class="toolIcon" v-show="!good">
						<img src="../../static/interact/dianzan1.png" class="toolIcon" v-show="good">
						<text>99+</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 发布 -->
		<view class="fabu" @click="handerClick">
			发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [{
					typeName: '推荐',
				}, {
					typeName: '租铺',
				}, {
					typeName: '加盟',
				}, {
					typeName: '经营',
				}, {
					typeName: '本地',
				}, {
					typeName: '情感',
				}, {
					typeName: '心愿',
				}],
				type: 0, // 选中id
				good: false, // 点赞状态
			}
		},
		onLoad() {
	
		},
		methods: {
			// 选中分类
			tapInfo(index) {
				this.type = index
			},
			// 跳转到文章内容
			onClick() {
				uni.navigateTo({
					url:'/pages/interact/articleContent/articleContent'
				})
			},
			// 跳转到个人主页
			goHomepage() {
				uni.navigateTo({
					url:'/pages/interact/homepage'
				})
			},
			// 跳转到发布页面
			handerClick() {
				uni.navigateTo({
					url:'/pages/interact/issue'
				})
			},
			onShare() {
				uni.navigateTo({
					url:'/pagesB/share/share'
				})
			}
		}
	}
</script>

<style>
	@import '../../css/interact.css';
	.fabu {
		position: fixed;
		right: 20rpx;
		bottom: 380rpx;
		width: 100rpx;
		line-height: 100rpx;
		border: 1rpx solid #ccc;
		border-radius: 50%;
		text-align: center;
	}
</style>